<template>
	<view class="my-page">
		<view class="my-header flex-y-center">
			<image class="bg" src="/static/images/user-bg.png" mode="widthFix"></image>
			<view class="user-img flex-grow-0">
				<!-- <image src="/static/images/user-img.png" mode="aspectFill"></image> -->
				<uv-image :src="infoData.avatarPath" width="72px" height="72px" shape="circle"></uv-image>
			</view>
			<view class="user-cont flex-grow-1">
				<view class="user-name size36">
					{{infoData.nickName}}
				</view>
				<view class="user-id" >
					ID:{{infoData.userId}}
				</view>
			</view>
			<!-- <view class="edit flex-grow-0" @click="modify">
				<image class="edit-bg" src="/static/images/my-icon0.png" mode=""></image>
				<text class="edit-title">编辑</text>
				<uv-icon color="#fff" name="arrow-right"></uv-icon>
			</view> -->
		</view>
		<view class="section">
			<SectionHeader title="全部订单" @click="moreOrder(0)" />
			<uv-grid :customStyle="{background:' #fff',padding: '30rpx 0px'}" :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in baseList" :key="index"  @click="click(item.value)">
					<view class="grid-img">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="nav-list">
			<view class="nav-item flex-y-center" v-for="(item,i) in navlist" :key="i" @click="goto(item)">
				<view class="nav-icon flex-grow-0">
					<image :src="item.image" mode="aspectFit"></image>
				</view>
				<view class="nav-cont flex-grow-1">
					{{item.title}}
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
			<view class="nav-item flex-y-center" @click="LogOut">
				<view class="nav-icon flex-grow-0">
					<image src="/static/images/exit.png"  mode="aspectFit"></image>
				</view>
				<view class="nav-cont flex-grow-1">
					退出登录
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
		</view>

		<FootTabbar :currentIndex="2"></FootTabbar>

	</view>
</template>

<script>
	import SectionHeader from '@/components/section-header/section-header.vue'
	export default {
		components: {
			SectionHeader
		},
		data() {
			return {
				infoData:{},//用戶信息
				baseList: [{
					title: '待服务',
					image: '/static/images/my-icon1.png',
					value:1
				}, {
					title: '服务中',
					image: '/static/images/my-icon2.png',
					value:2
				}, {
					title: '已完成',
					image: '/static/images/my-icon3.png',
					value:3
				}, {
					title: '待评价',
					image: '/static/images/my-icon4.png',
					value:4
				}, ],

				navlist: [{
						title: '反射区知识库',
						image: '/static/images/my-icon5.png',
						url: '/technicianPages/Reflection/Reflection'
					},
					{
						title: '我的课程',
						image: '/static/images/my-icon6.png',
						url: '/pages/course/course'
					},
					{
						title: '我的客户',
						image: '/static/images/my-icon7.png',
						url: '/technicianPages/myCustomer/myCustomer'
					},
				],
			}
		},
		mounted() {
			this.infoData= this.$store.state.userInfo.user
		},
		onShow() {
		
		},
		
		methods: {
			getList(){
				// 根据用户id查询计数据
				// this.jsListDate =  muajax.getAppUserId({appUserId:1});
			},
			click(e) {
				console.log(11)
				uni.navigateTo({
					url: '/pages/order/orderList'
				})
			},
			goto(item) {
				if (item.url == '/pages/course/course') {
					uni.switchTab({
						url: item.url
					})
				} else {
					uni.navigateTo({
						url: item.url
					})
				}

			}, //跳转
			//跳转
			moreOrder(index) {
				uni.navigateTo({
					url: '/pages/order/orderList?current='+index
				})
			},
			modify() {
				uni.navigateTo({
					url: '/pages/my/myModifyInfo'
				})
			},
			LogOut(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	image {
		width: 100%;
		height: 100%;
	}

	.my-header {
		position: relative;
		width: 731rpx;
		// width: 100%;
		height: 339rpx;
		margin: 20rpx auto;
		// background: #fff;
		padding: 0px 10rpx;

		.bg {

			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
		}

		.user-img {
			position: relative;
			z-index: 2;
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-left: 42rpx;
			margin-right: 19rpx;
		}

		.user-cont {
			position: relative;
			z-index: 2;
			color: #fff;

			.user-name {
				margin-bottom: 32rpx;
			}
		}

		.edit {
			position: relative;
			z-index: 2;
			width: 221rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
			color: #fff;
			margin-right: 40rpx;

			.edit-title {
				font-size: 32rpx;
				margin-left: 54rpx;
				flex-grow: 1;
			}

			.edit-bg {
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: -1;
			}
		}
	}

	.section {
		background: #fff;
	}

	.grid-img {
		width: 78rpx;
		height: 78rpx;
		background-color: #5fd2d2;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 42rpx;
		}
	}

	.grid-text {
		color: #666666;
		margin-top: 10rpx;
	}

	.nav-list {
		background: #fff;
		margin: 20rpx 0px;

		.nav-item {
			height: 100rpx;

			border-bottom: 1px solid #f1f1f1;
			padding: 0px 20rpx;
			background: #fff;
			text-align: left;
			margin: 0px;
			line-height: 0px;

			.nav-icon {
				width: 45rpx;
				height: 45rpx;
				margin-right: 20rpx;
			}

			.nav-cont {
				font-size: 32rpx;
			}
		}
	}

	uni-button:after {
		border: 0px solid #fff;
	}
	

</style>